import React, { Component } from 'react'
import {Link,Route,useNavigate} from 'react-router-dom'
import Detail from './Detail/Detail'
//useNavigate v6版本用于路由跳转
export default class Msg extends Component {
  state={
    msgObj:[
      {id:1,title:'Msg000'},
      {id:2,title:'Msg111'},
      {id:3,title:'Msg222'},
    ]
  }
  replaceShow=(id,title)=>{
    //replace跳转携带params参数
    // this.props.history.replace(`/home/msg/datail/${id}/${title}`)

    //replace跳转携带search参数
    // this.props.history.replace(`/home/msg/datail?id=${id}&title=${title}`)

    //replace跳转携带state参数
    this.props.history.replace('/home/msg/datail',{id,title})
  }
  pushShow=(id,title)=>{
    //push跳转携带params参数
    // this.props.history.push(`/home/msg/datail/${id}/${title}`)
    
    //push跳转携带search参数
    // this.props.history.push(`/home/msg/datail?id=${id}&title=${title}`)

    //push跳转携带state参数
    this.props.history.push('/home/msg/datail',{id,title})
  }
  //历史记录前进后退
  goup=()=>{
    this.props.history.goForward()
    // this.props.history.go(1)
  }
  godown=()=>{
    this.props.history.goBack()
    // this.props.history.go(-1)
  }
  render() {
    const {msgObj}=this.state
    return (
      <div>
        <ul>
          {
            msgObj.map(val=>{
              return(
                <li key={val.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/msg/datail/${val.id}/${val.title}`}>{val.title}</Link> */}
                  {/* 向路由传递search参数 */}
                  {/* <Link to={`/home/msg/datail?id=${val.id}&title=${val.title}`}>{val.title}</Link> */}
                  {/* 向路由传递state参数 replace替换历史记录栈中最新的一条数据，区别于push*/}
                  <Link replace to={{pathname:'/home/msg/datail',state:{id:val.id,title:val.title}}}>{val.title}</Link>
                  <button style={{marginLeft:"6px"}} onClick={()=>{this.replaceShow(val.id,val.title)}}>replace跳转</button>
                  <button style={{marginLeft:"6px"}} onClick={()=>{this.pushShow(val.id,val.title)}}>push跳转</button>
                </li>
              )
            })
            
          }
        </ul>
        <div style={{height:'20px'}}></div>
        {/* 组件接收params参数 */}
        {/* <Route path='/home/msg/datail/:id/:title' component={Detail} /> */}
        {/* search,state传递参数无需定义 */}
        <Route path='/home/msg/datail' component={Detail} />
        <button style={{marginLeft:"6px"}} onClick={this.goup}>前进</button>
        <button style={{marginLeft:"6px"}} onClick={this.godown}>后退</button>
      </div>
    )
  }
}
